<template>
	<view>
		<!-- 功能列表 -->

		<u-cell-group :border="showBorder">

			<u-cell v-if="sexChange" :border="showBorder" class="cell" title="性别"
				:url="'/pages/user/updateName?type=2&value='+userinfo.sex" :value="userinfo.sex" :isLink="true">
			</u-cell>
			<u-line></u-line>
			<u-cell v-if="areaChange" :border="showBorder" class="cell" title="地区"
				:url="'/pages/user/updateName?type=5&value='+userinfo.area" :value="userinfo.area" :isLink="true">
			</u-cell>
			<u-line></u-line>
			<u-cell v-if="birthChange" :border="showBorder" class="cell" title="出生日期"
				:url="'/pages/user/updateName?type=3&value='+userinfo.birth" :value="userinfo.birth" :isLink="true">
			</u-cell>
			<u-line></u-line>
			<u-cell v-if="usignChange" :border="showBorder" class="cell" title="个性签名"
				:url="'/pages/user/updateName?type=6&value='+userinfo.usign" :value="userinfo.usign" :isLink="true">
			</u-cell>
			<u-line></u-line>
		</u-cell-group>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showBorder: false,
				sexChange: true,
				areaChange: true,
				birthChange: true,
				usignChange: true,
				userinfo: {}
			};
		},
		created() {
			this.userinfo = uni.getStorageSync('user')
		},
		onShow() {
			this.userinfo = uni.getStorageSync('user')
			let sexChange = getApp().globalData.sexChange
			if (sexChange) {
				getApp().globalData.sexChange = false;
				this.sexChange = false
				setTimeout(() => {
					this.sexChange = true
				}, 100)
			}
			let areaChange = getApp().globalData.areaChange
			if (areaChange) {
				getApp().globalData.areaChange = false;
				this.areaChange = false
				setTimeout(() => {
					this.areaChange = true
				}, 100)
			}
			let birthChange = getApp().globalData.birthChange
			if (birthChange) {
				getApp().globalData.birthChange = false;
				this.birthChange = false
				setTimeout(() => {
					this.birthChange = true
				}, 100)
			}
			let usignChange = getApp().globalData.usignChange
			if (usignChange) {
				getApp().globalData.usignChange = false;
				this.usignChange = false
				setTimeout(() => {
					this.usignChange = true
				}, 100)
			}
		},
		methods: {

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #e7e7e7,
	
	}
	
	.u-collapse-item,
	.cell {
		padding: 5px 0px 5px 20px;
		background-color: #FFFFFF;
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color: #ff6364;
		width: 92%;
		height: 30vw;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;
		}
	}
</style>
